<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.show {
				display: block;
			}

			.hide {
				display: none;
			}
			
		
		</style>
	</head>
	<body>

		<!-- 视图 -->
		<div id="app">
			
			<div id="app">
			    <div style="color:red;font-size: 50px;">DOM元素的样式绑定</div>
			
				<!-- color 、fontSize 是样式的名字              -->
			    <div :style="{color:colorValue,fontSize:fontSizeValue}">DOM元素的样式绑定</div>
			    <div :style="stylelist">DOM元素的样式绑定111111</div>
			</div>
		</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					status: 'show',
					colorValue:'red',
					fontSizeValue:'35px',
					stylelist:'color:white;background-color:black'
				}
			})
		</script>



	</body>
</html>
